<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>

    <link rel="stylesheet" href="../css/adminlte.min.css">

</head>
<body>
<div class="wrapper" id="app">
    <div class="container-fluid">
        <div class="row" style="height: 100px">
            <h1 style="margin: 0 auto; text-align: center; line-height: 100px">文件上传测试</h1>
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-md-1">
            </div>
            <div class="card col-md-10">
                <div class="card-header">
                    <h3 class="card-title">密钥信息</h3>

                </div>
                <!-- /.card-header -->
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover text-nowrap">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>路径</th>
                            <th>密钥</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for=" (secretKey,i) in secretKeys">
                            <td>{{i+1}}</td>
                            <td>{{secretKey.path}}</td>
                            <td>{{secretKey.secretKey}}</td>
                            <td><span class="tag tag-success">刷新</span></td>
                        </tr>

                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->


        </div>
        <!-- /.row -->

        <div class="row">
            <div class="col-md-1">
            </div>
            <div class="col-md-5">
                <!-- general form elements -->
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">文件上传表单</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form>
                        <div class="card-body">
                            <div class="form-group">
                                <label>密钥</label>
                                <input type="password" class="form-control" v-model="form.secretKey" placeholder="请输入密钥">
                            </div>
                            <div class="form-group">
                                <label>文件</label>
                                <div class="input-group">
                                    <input type="file" >
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <span @click="onSubmit()" class="btn btn-primary btn-block">提交</span>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>
            <div class="col-md-5">
                <!-- Form Element sizes -->
                <div class="card card-success">
                    <div class="card-header">
                        <h3 class="card-title">上传结果</h3>
                    </div>
                    <div class="card-body">
                        <code>{{code}}</code>
                        <table class="table table-hover text-nowrap">
                            <tbody>
                            <tr>
                                <td>访问地址</td>
                                <td><code>{{code.url}}</code></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->

            </div>
            <!--/.col (right) -->

        </div>
        <!-- /.row -->
    </div>


</div>

<!-- vue -->
<script src="https://www.jiug.top/js/vue.min.js"></script>
<!-- axios -->
<script src="https://www.jiug.top/js/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                file: null,
                secretKey: ''
            },
            secretKeys: [],
            code:{}
        },
        created() {
            this.showSecretKeyTable()
        },
        methods: {
            showSecretKeyTable() {
                var _this = this
                axios.get('/file/findSecretKey').then((res) => {
                    _this.secretKeys = res.data.secretKeys
                }).catch((res) => {
                    console.log("请求失败")
                })
            },
            async onSubmit() {
                const formData = new FormData()
                const fileinfo = document.querySelector('[type="file"]').files[0];
                formData.append('file', fileinfo)
                formData.append('secretKey', this.form.secretKey)
                axios.post('/file/fileUpload', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then((res) => {
                    console.log(res.data)
                    if (res.data.code == 200) {
                         this.code = res.data.data
                    } else {
                        alert(res.data.message);
                    }
                }).catch((res) => {
                    console.log("提交失败")
                })
            }
        }
    })
</script>

</body>
</html>